//封装一个函数获取dom元素
function $$(a) {
    let data = document.querySelectorAll(a);
    if (data.length === 0) {
        return null;
    } else if (data.length === 1) {
        return data[0];
    } else {
        return data;
    }
}

// 数据
let datas = [
    ["Redmi 9", "腾讯黑鲨游戏手机3", "Redmi 8A", "小米移动 电话卡"],
    ["小米电视 大师 65英寸OLED", "小米电视5 75英寸", "全面屏电视Pro 55英寸", "小米电视4A 58英寸"],
    ["RedmiBook 13", "显示器"],
    ["冰箱", "微波炉", "电磁炉", "插线板"],
    ["手环5NFC", "滑板车", "无线车充"],
    ["打印机", "摄像机", "小爱音箱"],
    ["移动电源", "手机壳"],
    ["洗手机", "体脂称", "婴儿推车"],
    ["小爱音箱Art", "Redmi音箱", "蓝牙音箱"],
    ["小背包", "床垫", "驱蚊器"]
];

//获取侧边栏元素
let sidebar = $$('.sidebar-item');

//获取banner图片元素
let bannerImg = $$('.banner-img');

//获取小圆点元素
let listitem = $$('.list-item');

//激活下标
let activeIndex = 0;

//定时器序号
let timer = null;

//动态数据渲染
for (let i = 0; i < sidebar.length; i++) {
    //鼠标移入渲染数据
    sidebar[i].onmouseover = () => {
        let html = '';
        //鼠标移入显示信息
        $$('.sidebar-info').style.display = 'flex';
        //动态宽度
        $$('.sidebar-info').style.width = 248 * datas[i].length + 'px';
        //获取的数据遍历渲染
        for (let j = 0; j < datas[i].length; j++) {
            //数据太少，多遍历一次，让他铺满
            for (let k = 0; k < 6; k++) {
                html += `
                        <div class="info-item">
                            <div class="item">
                                <div class="info-img">
                                    <img src="./images/nav_imgs/${datas[i][j]}.png" class="img-auto" alt="">
                                        
                                </div>
                                <div class="info-title">${datas[i][j]}</div>
                            </div>
                        </div>
                    `;
            }
            //渲染完成显示页面
            $$('.sidebar-info').innerHTML = html;
        }

    }
    // 鼠标离开
    sidebar[i].onmouseout = () => {
        // 鼠标离开隐藏信息
        $$('.sidebar-info').style.display = 'none';
    }
}

//移入显示
$$('.sidebar-info').onmouseover = () => {
    // 鼠标移入显示信息
    $$('.sidebar-info').style.display = 'flex';
}

//离开隐藏
$$('.sidebar-info').onmouseout = () => {
        // 鼠标离开隐藏信息
    $$('.sidebar-info').style.display = 'none';
}

//点击小圆点切换
listitem.forEach((item, index) => {
    item.onclick = () => {
        activeIndex = index;
        move(activeIndex);
    }
})

//移动，remove claaName
function move(a) {
    //如果已经激活，再次点击就拦截
    if (listitem[a].classList.contains('active')) {
        console.log('已激活');
        return;
    }
    //排他
    for (let i = 0; i < listitem.length; i++) {
        listitem[i].classList.remove('active');
        bannerImg[i].classList.remove('banner-active');
    }
    // 添加类名
    listitem[a].classList.add('active');
    bannerImg[a].classList.add('banner-active');
}

//true: 向右走 false: 向左走
function aplay(a) {
    if (a) {
        activeIndex++;
        // 边界控制，如果是最后一张，下一次播第一张
        if (activeIndex > (bannerImg.length - 1)) {
            activeIndex = 0;
        }
    } else {
        activeIndex--;
        // 边界控制，如果是第一张，如果在播上一张就播最后一张
        if (activeIndex < 0) {
            activeIndex = (bannerImg.length - 1);
        }
    }
    move(activeIndex);
}

//左按钮
$$('.left-box').onclick = () => {
    aplay(false);
}

//右按钮
$$('.right-box').onclick = () => {
    aplay(true);
}

//自动轮播
function timerAplay() {
    if (timer == null) {
        timer = setInterval(() => {
            aplay(true);
        }, 1000)
    }
}

// 进入就调用
timerAplay();

//移入停止轮播
$$('.container').onmouseover = () => {
    // 清除定时器
    clearInterval(timer);
    // timer 置空
    timer = null;
}

//离开继续轮播
$$('.container').onmouseout = () => {
    // 调用自动轮播方法
    timerAplay();
}
